<template>
  <div class="_wz_hiddenDangersListDealWith">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <div style="margin:0 0 10px;" class="_wz_ztList_cont">
        <div style="display: inline-block;">
          风险项目：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemCheckName ? riskListData.riskItemCheckName : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;" v-if="!!riskListData">
          风险等级：
          <span class="_wz_ztList_cont_span" v-if="riskListData.riskItemGrade == 1">低风险</span>
          <span class="_wz_ztList_cont_span" v-if="riskListData.riskItemGrade == 2">一般风险</span>
          <span class="_wz_ztList_cont_span" v-if="riskListData.riskItemGrade == 3">较大风险</span>
          <span class="_wz_ztList_cont_span" v-if="riskListData.riskItemGrade == 4">重大风险</span>
          <Divider type="vertical" />
        </div>
        <!--      <div style="display: inline-block;">-->
        <!--        管控措施：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemControl ? riskListData.riskItemControl : '&#45;&#45;'}}</span>-->
        <!--        <Divider type="vertical" />-->
        <!--      </div>-->
        <!--      <div style="display: inline-block;">-->
        <!--        失控表现：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemOutControl ? riskListData.riskItemOutControl : '&#45;&#45;'}}</span>-->
        <!--        <Divider type="vertical" />-->
        <!--      </div>-->
        <div style="display: inline-block;">
          责任部门：<span class="_wz_ztList_cont_span">{{!!riskListData.riskCheckDept ? riskListData.riskCheckDept : '--'}}</span>
          <Divider type="vertical" />
        </div>
        <div style="display: inline-block;">
          责任人员：<span class="_wz_ztList_cont_span">{{!!riskListData.riskCheckPerson ? riskListData.riskCheckPerson : '--'}}</span>
        </div>
        <div style="display: inline-block;">
          风险内容：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemCheckContent ? riskListData.riskItemCheckContent : '--'}}</span>
        </div>
        <br/>
        <div>
          问题描述：<span class="_wz_ztList_cont_span">{{!!riskListData.riskDescribe ? riskListData.riskDescribe : '--'}}</span>
        </div>
        <div>
          <div style="display: inline-block;">
            排查清单：
            <div class="demo-upload-list" style="display: block;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListData.riskCheckImg?apiUrl.imgUrl + riskListData.riskCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
          <div style="display: inline-block;">
            签字照片：
            <div class="demo-upload-list" style="display: block;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListData.riskCheckSignImg?apiUrl.imgUrl + riskListData.riskCheckSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
        </div>
      </div>
    </Card>
    <Card dis-hover :bordered="true" style="margin:0 0 10px;" v-if="riskListData.riskItemHandleState == 1">
      <div style="margin:0 0 10px;" class="_wz_ztList_cont">
        <div style="display: inline-block;">
          整改措施：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemControl ? riskListData.riskItemControl : '--'}}</span>
        </div>
        <div style="display: inline-block;">
          整改结果：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemResult ? riskListData.riskItemResult : '--'}}</span>
        </div>
        <div style="display: inline-block;">
          整改时间：<span class="_wz_ztList_cont_span">{{!!riskListData.riskItemCompletionDate ? riskListData.riskItemCompletionDate : '--'}}</span>
        </div>
        <div>
          <div style="display: inline-block;">
            整改照片：
            <div class="demo-upload-list" style="display: block;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListData.riskHandleImg?apiUrl.imgUrl + riskListData.riskHandleImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
          <div style="display: inline-block;">
            签字照片：
            <div class="demo-upload-list" style="display: block;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="!!riskListData.riskHandleSignImg?apiUrl.imgUrl + riskListData.riskHandleSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <Card dis-hover :bordered="true" style="margin:0 0 10px;" v-if="riskListData.riskItemHandleState == 0">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="整改措施" prop="riskItemControl">
          <i-input v-model="formData.riskItemControl" placeholder="请填写整改措施" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
        <FormItem label="整改结果" prop="riskItemResult">
          <i-input v-model="formData.riskItemResult" placeholder="请填写整改结果" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
        </FormItem>
        <FormItem label="整改时间" prop="riskItemCompletionDate">
          <DatePicker type="datetime"  v-model="formData.riskItemCompletionDate" placeholder="请选择整改时间" style="width: 100%;"></DatePicker>
        </FormItem>
        <Row>
          <i-col span="12">
            <FormItem label="整改照片">
              <Upload :before-upload="riskHandleFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传整改照片
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!riskHandleFile.url?riskHandleFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
          <i-col span="12">
            <FormItem label="整改签字">
              <Upload :before-upload="riskHandleSignFileFun" action="" style="color: #2d8cf0;cursor: pointer;">上传整改签字
              </Upload>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!riskHandleSignFile.url?riskHandleSignFile.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </FormItem>
          </i-col>
        </Row>

<!--        * 风险处理状态（0：未处理，1：已处理） Integer riskItemHandleState;-->
<!--        * 整改措施 String riskItemControl;-->

    </Form>
    </Card>



    <div class="demo-drawer-footer" v-if="riskListData.riskItemHandleState == 0">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>
  </div>
</template>
<script>

export default {
  props: ['riskListData'],//接收来自父组件的数据
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      ruleValidate: {//正则
        riskItemResult: [
          {required: true, message: '请填写整改结果', trigger: 'blur'}
        ],
        riskItemControl: [
          {required: true, message: '请填写整改措施', trigger: 'blur'}
        ],
        riskItemCompletionDate: [
          {type: "date", required: true, message: "请选择整改时间", trigger: "blur"}
        ],
      },
      formData: {
        id:this.riskListData.id,
        riskItemHandleState:1,
        riskItemControl:this.riskListData.riskItemControl,
        riskCheckUuid:this.riskListData.riskCheckUuid,
        uuid:this.riskListData.uuid,
        riskItemCompletionDate:new Date()
      },
      riskHandleFile:{
        data:null,
        url:''
      },
      riskHandleSignFile:{
        data:null,
        url:''
      },

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

  },
  methods: {//执行的方法
    riskHandleFileFun(file) {//营业执照图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.riskHandleFile.url = window.URL.createObjectURL(file);
        that.riskHandleFile.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    riskHandleSignFileFun(file) {//营业执照图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.riskHandleSignFile.url = window.URL.createObjectURL(file);
        that.riskHandleSignFile.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使用

          var data = JSON.parse(JSON.stringify(that.formData));
          data.riskItemCompletionDate = that.public.timeFormatting(data.riskItemCompletionDate, "yyyy-MM-dd hh:mm:ss")

          let formData = new FormData();

          for (let key in data) {
            if (!!data[key]) {
              formData.append(key, data[key]);
            }
          }

          //整改照片
          if (!!that.riskHandleFile.data) {//选择了图片
            formData.append('riskHandleFile', that.riskHandleFile.data);
          }
          //整改签字
          if (!!that.riskHandleSignFile.data) {//选择了图片
            formData.append('riskHandleSignFile', that.riskHandleSignFile.data);
          }

          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskCheckDetailHandle", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })

        } else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_hiddenDangersListDealWith {
  height: 100%;

  ._wz_ztList_cont {
    letter-spacing: 1px;
    line-height: 30px;

    ._wz_ztList_cont_span {
      margin: 0 10px 0 0;
      color: #01AAED;
      word-break: break-all;
    }
  }


  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}
</style>
